﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2023级蜂学2班随机抽签</title>
    <style>
        body {
            font-family: 'Comic Sans MS', cursive, sans-serif;
            background-color: #f9f9f9;
            background-image: url('https://www.transparenttextures.com/patterns/cartoon.png');
            text-align: center;
            padding: 20px;
        }
        h1 {
            color: #ff6f61;
        }
        #name-display {
            font-size: 2em;
            margin: 20px 0;
            padding: 10px;
            border: 2px dashed #ff6f61;
            border-radius: 10px;
            background-color: #fff;
            display: inline-block;
            width: 200px;
            height: 50px;
            line-height: 50px;
            overflow: hidden;
        }
        #speed-control {
            margin: 20px 0;
        }
        button {
            background-color: #ff6f61;
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 1.2em;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background-color: #ff3b2f;
        }
        .highlight {
            color: #ff6f61;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>2023级蜂学2班随机抽签</h1>
    <div id="name-display">点击开始</div>
    <div id="speed-control">
        <label for="speed">滚动速度:</label>
        <input type="range" id="speed" name="speed" min="1" max="10" value="5">
    </div>
    <button id="start-btn">开始点名</button>

    <script>
        const names = [
            "平钰锋", "沈倩", "朱兴美", "邓理仁", "夏彬松", "高健国", "张如明", "鄢宁利", "李定称", "恰然让",
            "龙亚英娜", "禹健涛", "李亚菲", "李刘一帆", "张涛", "孟登涛", "田伟雪", "赵俊", "马宏丽", "李英",
            "毕慧", "李小东", "李涛", "普永林", "申雷", "姜李睿"
        ];

        let interval;
        let isRunning = false;
        const nameDisplay = document.getElementById('name-display');
        const startBtn = document.getElementById('start-btn');
        const speedControl = document.getElementById('speed');

        function getRandomName() {
            return names[Math.floor(Math.random() * names.length)];
        }

        function startRolling() {
            if (isRunning) return;
            isRunning = true;
            startBtn.textContent = '暂停点名';
            interval = setInterval(() => {
                nameDisplay.textContent = getRandomName();
            }, 1000 / speedControl.value);
        }

        function stopRolling() {
            if (!isRunning) return;
            isRunning = false;
            startBtn.textContent = '开始点名';
            clearInterval(interval);
            nameDisplay.classList.add('highlight');
        }

        startBtn.addEventListener('click', () => {
            if (isRunning) {
                stopRolling();
            } else {
                startRolling();
            }
        });

        speedControl.addEventListener('input', () => {
            if (isRunning) {
                clearInterval(interval);
                interval = setInterval(() => {
                    nameDisplay.textContent = getRandomName();
                }, 1000 / speedControl.value);
            }
        });
    </script>
</body>
</html>